<template>
  <!--  <div id="app">-->
  <el-container>

    <el-header
      style="text-align: right; font-size: 35px;background-color: #545c64"
      class="el-header"
      v-show="!($route.meta.doNotshowCommonHeader)"
    >



<!--      <br />-->
      <span style="color: #f7f1f8;float: left">Fancy Music管理平台</span>
      <span style="font-size:23px;color: #67C23A">{{aa}}</span>
<!--      <span>王小虎</span>-->
<!--      <el-dropdown>-->
<!--        <i class="el-icon-setting" style="margin-right: 15px;"></i>-->
<!--        <el-dropdown-menu slot="dropdown">-->
<!--          <el-dropdown-item>查看</el-dropdown-item>-->
<!--          <el-dropdown-item>新增</el-dropdown-item>-->
<!--          <el-dropdown-item>删除</el-dropdown-item>-->
<!--        </el-dropdown-menu>-->
<!--      </el-dropdown>-->
    </el-header>

    <el-container style="height: 675px">
      <el-aside
        width="200px"
        style="background-color: #545c64"
        class="el-aside"
        v-show="!($route.meta.doNotshowCommonHeader)"
      >
        <el-menu
          default-active="1"
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b">


          <el-menu-item index="1">
            <i class="el-icon-location"></i>
            <span slot="title" @click="this.usera">用户管理</span>
          </el-menu-item>


          <el-menu-item index="2">
            <i class="el-icon-menu"></i>
            <span slot="title" @click="this.music">歌曲管理</span>
          </el-menu-item>

<!--          <el-menu-item index="3">-->
<!--            <i class="el-icon-document"></i>-->
<!--            <span slot="title">歌单管理</span>-->
<!--          </el-menu-item>-->

          <el-menu-item index="4">
            <i class="el-icon-setting"></i>
            <span slot="title" @click="this.singer">歌手查看</span>
          </el-menu-item>

          <el-menu-item index="5">
            <i class="el-icon-document"></i>
            <span slot="title" @click="this.visualization">可视化</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <el-main>
        <router-view/>
      </el-main>

    </el-container>


    <el-footer
      style="text-align: right; font-size: 35px;background-color: #545c64"
      class="el-footer"
      v-show="!($route.meta.doNotshowCommonHeader)"
    >



      <!--      <br />-->
      <span style="color: #f7f1f8;float: left ;font-size: large ;  align-self: auto">POWERED BY FANCY</span>
      <span style="font-size:23px;color: #67C23A"></span>

    </el-footer>


  </el-container>

  <!--  </div>-->
</template>
<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8" ></script>
<script>

  import axios from 'axios'

  export default {
    name: 'App',
    data() {
      return {
        aa: "loading..."
      }
    },
    methods:{
      singer(){
        this.$router.push("/getSinger")
      },
      music(){
        this.$router.push("/addMusic")
      },
      usera(){
        this.$router.push("/user")
      },
      visualization(){
        this.$router.push("/echarts")
      }
    },
    created() {
      axios.get("https://v2.jinrishici.com/one.json").then(res => {

        console.log(res.data.data.content);
        this.aa=res.data.data.content
      })
    }
  }
</script>

<style>
  .el-header {
    background-color: #b3c0d1;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #67C23A;
  }

</style>
